<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/init.css">
    <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<!--登录框-->
<div id="loginDiv">
    <div></div>
    <input id="loginName" placeholder="名字" autocomplete="off" type="text" maxlength="4">
    <input id="loginPass" placeholder="密码" type="password">
    <button id="loginButton" type="button">登</button>
</div>

<div id="windowDiv">
    <div id="leftDiv">
        <div class="xing"></div>
        <div class="ming">赵子龙</div>
    </div>
    <div id="middleDiv">

        <!--<div class="new">
            <div>张三</div>
        </div>
        <div class="new has">
            <div>李四</div>
        </div>

        <div class="new">
            <div>张三三</div>
        </div>
        <div class="new has">
            <div>李四四</div>
        </div>-->

    </div>
    <div id="rightDiv">
        <div id="headDiv">
            <!--某某某-->
        </div>
        <div id="bodyDiv">

            <!--<div class="contentDiv" style="height: 50px;background: #c4c4c4">
                <div class="other"> 在干嘛</div>
                <div class="owner"> 在敲代码</div>
            </div>
            <div class="contentDiv" style="height: 50px;background: #07c160;display: none">
                <div class="other"> 在干嘛</div>
                <div class="owner"> 在敲代码</div>
            </div>-->

        </div>
        <div id="toolDiv">
            <img id="xiao" src="/img/xiao.png">
            <img id="ku" src="/img/ku.png">
        </div>
        <div id="sendDiv" contenteditable="true" tabindex="-1">

        </div>
        <div id="buttonDiv">
            <button id="sendButton" type="button">发 送(S)</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    var checkName = null;
    var ws = new WebSocket("ws://localhost/ws");

    ws.onopen = function () {
        console.log("连接成功")
    }
    ws.onclose = function () {
        console.log("连接关闭")
    }
    ws.onerror = function () {
        console.log("发生错误")
    }
    /**
     * 当接收到后台传递过来的消息时 触发
     * @param event
     */
    ws.onmessage = function (event) {
        console.log(event.data);

        var json = JSON.parse(event.data);
        //判断消息类型
        if (json.type == "login") {
            //判断登录是否成功
            if (json.content == "登录成功") {
                //.html()不传参的话是获取值
                //var txt = $("#leftDiv .ming").html();
                $("#leftDiv .ming").html(json.loginName);

                //隐藏登录框 显示聊天窗
                $("#loginDiv").fadeOut("slow", function () {
                    $("#windowDiv").fadeIn("slow");
                });

                //当登录成功后  给发送按钮添加点击事件
                $("#sendButton").click(function () {

                    if (checkName == null) {
                        alert("请选择要聊天的人员");
                        return;
                    }
                    var content = $("#sendDiv").html();

                    //先把内容放入到本地对应的人员的对话框中
                    //<div class="owner"> 在敲代码</div>
                    debugger
                    $("#right" + checkName).append("<div class='owner'>" + content + "</div>");


                    //构建 聊天类型的 消息
                    var msg = {};
                    msg.type = "chat";
                    msg.fromName = json.loginName;
                    msg.toName = checkName;
                    msg.content = content;
                    //发送消息到服务器
                    ws.send(JSON.stringify(msg));
                    //发送内容后要清空div中的值
                    $("#sendDiv").html("")
                });

            } else {
                alert(json.content + ":姓名:任意三个字符,密码:123");
            }
        } else if (json.type == "online") {
            //{"onLines":["王五五","李四四"],"type":"online"}
            for (var i = 0; i < json.onLines.length; i++) {
                //var let 都可以声明变量 但是在循环中 最好只用let
                let name = json.onLines[i];
                let $left = $("<div class='new' id='left" + name + "'><div>" + name + "</div></div>");
                $left.appendTo("#middleDiv");
                $left.click(function () {
                    checkName = name;
                    //给点击的左侧人员 加上选中后的样式
                    $left.addClass("sel");
                    $left.removeClass("has");
                    //取得点击中的元素的兄弟元素 去除兄弟元素被选中的样式
                    $left.siblings().removeClass("sel");
                    //点击谁 右侧上部要显示谁的名字
                    $("#headDiv").html(name);
                    $("#right" + name).show();
                    $("#right" + name).siblings().hide();
                });

                var $right = $('<div id="right' + name + '" class="contentDiv" ></div>');
                $right.hide();
                $right.appendTo("#bodyDiv");
            }
        } else if (json.type == "chat") {
            //如果当前打开的聊天窗口 和发信人 是同一个人 就不用给左侧列表加来消息提醒了
            if (checkName != json.fromName) {
                //{"type":"chat","fromName":"张三三","toName":"李四四","content":"123"}
                //接收到消息  通过解析消息 获取对应的左侧人员元素
                $("#left" + json.fromName).addClass("has");
            }
            //接收到消息  通过解析消息 获取对应的右侧聊天窗口元素 插入格式化聊天内容
            $("#right" + json.fromName).append("<div class='other'>" + json.content + "</div>");
        } else if (json.type == "offline") {
            $("#left" + json.offName).remove();
            $("#right" + json.offName).remove();
            if (checkName == json.offName) {
                $("#headDiv").html("");
                checkName = null;
            }
        }
    }

    //获取id为loginButton的元素  添加点击事件
    $("#loginButton").click(function () {
        //获取input内容
        var name = $("#loginName").val();
        var pass = $("#loginPass").val();

        //构建一个规范的消息格式内容
        var msg = {};
        msg.type = "login";
        msg.loginName = name;
        msg.loginPass = pass;
        //发送登录消息到后台  后台处理成功后发送消息给前端  前端收到消息后激活onmessage事件
        ws.send(JSON.stringify(msg));
    });

    $("#xiao").click(function () {
        $("#sendDiv").append('<img src="/img/xiao.png">');
    });

    $("#ku").click(function () {
        $("#sendDiv").append('<img src="/img/ku.png">');
    });

</script>
</body>
</html>
